<template>
    <div class="cityBox">
      <div class="serchBox">
        <input type="text" placeholder="城市/行政区">
      </div>
      <div class="hotCity">
        <h2>热门城市</h2>
        <ul class="hotBox">
            <li>北京市</li>
            <li>上海市</li>
            <li>成都市</li>
            <li>贵阳市</li>
            <li>重庆市</li>
            <li>武汉市</li>
        </ul>
      </div>
      <div class="city">
        <mt-index-list>
          <mt-index-section index="A">
            <mt-cell title="安吉市"></mt-cell>
            <mt-cell title="安康市"></mt-cell>
            <mt-cell title="安吉市"></mt-cell>
          </mt-index-section>
          <mt-index-section index="B">
            <mt-cell title="北京市"></mt-cell>
            <mt-cell title="白山市"></mt-cell>
            <mt-cell title="北京市"></mt-cell>
            <mt-cell title="白山市"></mt-cell>
            <mt-cell title="北京市"></mt-cell>
            <mt-cell title="白山市"></mt-cell>
          </mt-index-section>
          <mt-index-section index="C">
            <mt-cell title="长洲市"></mt-cell>
            <mt-cell title="长沙市"></mt-cell>
            <mt-cell title="长洲市"></mt-cell>
            <mt-cell title="长沙市"></mt-cell>
            <mt-cell title="长洲市"></mt-cell>
            <mt-cell title="长沙市"></mt-cell>
          </mt-index-section>
          <mt-index-section index="D">
            <mt-cell title="大连市"></mt-cell>
            <mt-cell title="大同市"></mt-cell>
            <mt-cell title="大连市"></mt-cell>
            <mt-cell title="大同市"></mt-cell>
            <mt-cell title="大连市"></mt-cell>
            <mt-cell title="大同市"></mt-cell>
          </mt-index-section>
          <mt-index-section index="Z">
            <mt-cell title="浙江市"></mt-cell>
            <mt-cell title="郑州市"></mt-cell>
            <mt-cell title="浙江市"></mt-cell>
            <mt-cell title="郑州市"></mt-cell>
            <mt-cell title="浙江市"></mt-cell>
            <mt-cell title="郑州市"></mt-cell>
          </mt-index-section>
        </mt-index-list>
      </div>
    </div>
</template>

<script>

</script>

<style lang="Sass">
    .cityBox{margin-top: 2rem;

      .serchBox{  height: 2.5rem; background: #eee;  text-align: center;

        input[type=text]{width: 13.75rem; height: 1.5rem; border-radius: 1rem; border:none; margin-top: .5rem; padding-left: 2rem; box-sizing:border-box;}
      }
      .hotCity{ width: 100%; height: 6.6rem; background: #f5f5f5; border-top: .05rem solid #e8e8e8;

        h2{font-size: .7rem; padding-left: 1rem; line-height: 1.625rem;}
        .hotBox { padding-left: 1rem; list-style: none;

          li{float: left; width: 4.5rem; height: 1.5rem; margin-right: 1.225rem; background: #fff; border:.05rem solid #e8e8e8; text-align: center; font-size: .65rem; line-height: 1.5rem; margin-top: .5rem;}
        }
      }
      .city{

        .mint-indexlist-nav{
          position: fixed;
          top: 2rem;
          background: none;
          color:#63c4a9;
          border: none;

          .mint-indexlist-navlist{ position: fixed; top: 4.5rem; right: 0;}
          .mint-indexlist-navlist:before{
            content: "";
            width:0.75rem;
            height: 0.75rem;
            background: url('./img/icon_sou@2x.png');
            background-size: 100% 100%;
            margin-left: 0.1rem;
            margin-top: 0.5rem;
            margin-bottom: 0.2rem;
          }
        }
        .mint-indexlist-content{margin-right: 0 !important; }
      }
    }
</style>